<template>
    <el-row>
        <el-row class="single-pic" v-if="strategyData.images && strategyData.images.length < 3">
            <img src="/images/7c251ddd2b533caf7bfa888ed1952c2.jpg" alt="">
            <el-row class="content">
                <h3 @click="$router.push('/tourismStrategy/detail?id='+strategyData.id)">{{strategyData.title}}</h3>
                <el-row class="artical">{{strategyData.summary}}</el-row>
                <el-row class="other" type="flex" justify="space-between">
                    <el-row class="other-left">
                        <span><i class="el-icon-location-outline"></i>{{strategyData.cityName}}</span>
                        <span>
                            by
                            <img :src="$axios.defaults.baseURL + strategyData.account.defaultAvatar" alt="">
                            <b>{{strategyData.account.nickname}}</b>
                        </span>
                        <span><i class="el-icon-view"></i>{{strategyData.watch}}</span>
                    </el-row>
                    <el-row class="other-right">{{strategyData.like}} &nbsp;赞</el-row>
                </el-row>
            </el-row>
        </el-row>
        <el-row class="many-pic" v-if="strategyData.images && strategyData.images.length >= 3">
            <el-row class="content">
                <h3 @click="$router.push('/tourismStrategy/detail?id='+strategyData.id)">{{strategyData.title}}</h3>
                <el-row class="artical">{{strategyData.summary}}</el-row>
                <el-row class="pic">
                    <el-row>
                        <img src="/images/b92bb8ab7edd42879f48e38d4d22062c.jpeg" alt="">
                    </el-row>
                    <el-row>
                        <img src="/images/b92bb8ab7edd42879f48e38d4d22062c.jpeg" alt="">
                    </el-row>
                    <el-row>
                        <img src="/images/b92bb8ab7edd42879f48e38d4d22062c.jpeg" alt="">
                    </el-row>
                </el-row>
                <el-row class="other" type="flex" justify="space-between">
                    <el-row class="other-left">
                        <span><i class="el-icon-location-outline"></i>{{strategyData.cityName}}</span>
                        <span>
                            by
                            <img :src="$axios.defaults.baseURL + strategyData.account.defaultAvatar" alt="">
                            <b>{{strategyData.account.nickname}}</b>
                        </span>
                        <span><i class="el-icon-view"></i>{{strategyData.watch}}</span>
                    </el-row>
                    <el-row class="other-right">{{strategyData.like}} &nbsp;赞</el-row>
                </el-row>
            </el-row>
        </el-row>
    </el-row>
</template>

<script>
export default {
    props:{
        strategyData:{
            type:Object,
            default:() => {
                return {};
            }
        }
    }

}
</script>

<style lang="less" scoped>
.single-pic{
    display: flex;
    padding:20px 0;
    cursor: pointer;
    border-bottom: 1px solid #EEEEEE;
    img{
        flex:30%;
        width:220px;
        height: 170px;
    }
    .content{
        flex:70%;
        padding:10px;
        h3{
           font-size: 18px;
           font-weight: 400;
           &:hover{
               color: #FFA000;
           }
        }
        .artical{
           width:100%;
           height: 58px;
           line-height: 20px;
           margin:20px 0;
           font-size: 13px;
           color: #666666;
           text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 3;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .other{
            font-size: 12px;
            color: #999999;
            .other-left{
                span{
                    img{
                        width:15px;
                        height: 15px;
                        vertical-align: middle;
                        border-radius: 50%;
                    }
                    b{
                        font-weight: 400;
                        color: #FFA000;
                    }
                    &:nth-child(2n){
                       margin:0 10px;
                    }
                }
            }
            .other-right{
                font-size: 14px;
                color: #FFA000;
            }
        }
    }
}
.many-pic{
    padding:25px 0;
    cursor: pointer;
    border-bottom: 1px solid #EEEEEE;
    .content{
        h3{
           font-size: 18px;
           font-weight: 400;
           &:hover{
               color: #FFA000;
           }
        }
        .artical{
            width:100%;
            height: 58px;
            line-height: 20px;
            margin:20px 0;
            font-size: 13px;
            color: #666666;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 3;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .pic{
            display: flex;
            .el-row{
                flex:1;
                &:nth-child(2n){
                    margin:0 20px;
                }
                img{
                    // 宽高不要一起写，否则会继承父盒子的高度
                    width:100%;
                }
            }
        }
        .other{
            margin-top: 15px;
            font-size: 12px;
            color: #999999;
            .other-left{
                span{
                    img{
                        width:15px;
                        height: 15px;
                        vertical-align: middle;
                        border-radius: 50%;
                    }
                    b{
                        font-weight: 400;
                        color: #FFA000;
                    }
                    &:nth-child(2n){
                       margin:0 10px;
                    }
                }
            }
            .other-right{
                font-size: 14px;
                color: #FFA000;
            }
        }
    }
}
</style>